<template>
    <div class="sign-wrapper">
        <div style="font-size: 16;font-weight: 700;">积分信息</div>
        <div class="user-info-item">用户名：{{ scoreInfo.username }}</div>
        <div class="user-info-item">累积积分：{{  scoreInfo.accrueTotal }}</div>
        <div class="user-info-item">剩余积分：{{ scoreInfo.residue }}</div>
        <div class="user-info-item">最后一次签到时间：{{ scoreInfo.lastSignInTime }}</div>
        <div class="sign-container">
            <div class="btn-deep-primary">
                <el-button @click="signIn" :disabled="scoreInfo.hasSign">{{scoreInfo.hasSign?'今日已签到':'立即签到'}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {get, post} from '@/utils/api.js'

export default {

    data(){


        return{
            scoreInfo:{
                username:'',
                accrueTotal:0,
                residue:0,
                lastSignInTime:'',
                hasSign:true
            }
        }
    },
    methods:{
        signIn(){
            const promise = post({
                url:'/base-score/front/sign/in'
            });

            promise.then(res=>{
                if(res&&res.code === 200 ){
                    this.getScoreInfo();
                    this.$message.success(res.message);
                    
                }
            })
           
           
        },
        getScoreInfo(){
            const promise = get({
                url:'/base-score/front/score/user/details'
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.scoreInfo = res.data;
                }
            })
        }
    },
    created(){
        this.getScoreInfo();
    }

}
</script>

<style scoped>
.sign-wrapper{
    width: 100%;
    padding: 20px;


}
.sign-container{
    width: 100%;
    display: flex;
    justify-content: center;
}
/* .sign-main{
    width: 90%;
} */

.btn-deep-primary>>>button{
    border-radius: 0;
    background-color: #FF6900;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}
.btn-deep-primary>>>button[disabled]{
    background-color: #FF6900 !important;
    color: #fff;
}

.input-deep>>>input{
    border: 1px solid #dcdfe6;
    border-radius: 0;

}

.btn-deep>>>button{
    border-radius: 0;
    background-color: #fff;
    color: #999;
    font-weight: 400;
    letter-spacing: 2px;
    /* border-top: 0; */
    /* border-left: 0; */
}

.user-info-item{
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    min-height: 40px;
    line-height: 40px;
}
</style>
